<template>
	<view :style="{
		background: itemData.style.bgcolor,
		padding:
			itemData.style.paddingTop +
			'px ' +
			itemData.style.paddingLeft +
			'px ' +
			itemData.style.paddingBottom +
			'px ' +
			itemData.style.paddingLeft +
			'px',
	}">
		<view class="drag optional">
			<view class="bg-box">
				<view class="news" @click="gotoPage('/pages/plus/chat/chat_list')">
					<image class="chat" src="/static/icon/chat.png" mode=""></image>
				</view>
				<view v-if="userInfo.msgCount" class="news_num">
					{{ userInfo.msgCount }}
				</view>
				<view class="d-s-c" style="
            z-index: 1;
            position: relative;
            margin-left: 20rpx;
            margin-top: 80rpx;
          ">
					<view class="item-image" @click="gotoPage('/pages/user/set/set')" v-if="userInfo.detail">
						<image :src="userInfo.detail.avatarUrl" mode=""></image>
					</view>
					<view class="item-image" @click="gotoPage('/pages/user/set/set')" v-if="!isLogin">
						<image src="/static/login-default.png" mode=""></image>
					</view>
					<view class="d-c d-b-s white" style="height: 102rpx">
						<view class="d-c-c">
							<text class="fb f32" v-if="userInfo.detail">{{ userInfo.detail.nickName }}</text>
							<text class="fb f32" @click="gotoPage('/pages/user/set/set')" v-if="!isLogin">{{
								$t('common.click_authorize') }}</text>
							<text class="ml20 grade" v-if="userInfo.userGrade">{{ userInfo.userGrade }}</text>

						</view>
						<view v-if="userInfo.detail">ID:{{ userInfo.detail.userId }}</view>
						<picker mode="selector" @change="changeLang" :range="Object.values(lantMap)" :value="index">
							<text>{{ lantMap[$i18n.locale] || $t('user.please_select_lang') }} ▼</text>
						</picker>
					</view>
				</view>
				<view class="bg-base" :class="'bg-base-' + itemData.style.type"></view>
				<view class="diy-Base" :style="{ background: itemData.style.background }">
					<view class="list column-3">
						<view class="item" @click="gotoPage('/pages/user/my-wallet/my-wallet')">
							<view class="item-text fb f32" v-if="userInfo.detail">{{ userInfo.detail.balance }}</view>
							<view class="item-text fb f32" v-if="!isLogin">{{ 0 }}</view>
							<view class="item-text text-ellipsis">{{ $t('common.account_balance') }}</view>
						</view>
						<view class="item item-center" :style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
							@click="gotoPage('/pages/user/points/points')">
							<view class="item-text fb f32">{{ userInfo.detail && userInfo.detail.points }}</view>
							<view class="item-text fb f32" v-if="!isLogin">{{ 0 }}</view>
							<view class="item-text text-ellipsis">{{ userInfo.setting && userInfo.setting.pointsName }}
							</view>
						</view>
						<view class="item" @click="gotoPage('/pages/user/my-coupon/my-coupon')">
							<view class="item-text fb f32">{{ userInfo.coupon || '0' }}</view>
							<view class="item-text text-ellipsis">{{ $t('common.coupon_group') }}</view>
						</view>
					</view>
				</view>
			</view>
			<slot />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lantMap: {
				'zh-Hant': '繁體中文',
				'zh-Hans': '简体中文',
				'en': 'English'
			},
			index: 0
		};
	},
	props: ["itemData", "userInfo", 'isLogin'],
	created() { },
	methods: {
		changeLang(e) {
			let idx = e.detail.value;
			this.index = idx;
			let langs = Object.keys(this.lantMap);
			this.$i18n.locale = langs[idx];
			uni.setLocale(langs[idx]);
			uni.setStorageSync('lang_locale', langs[idx])
		},
		/*跳转页面*/
		gotoDetail(e) {
			this.gotoPage(e.linkUrl);
		}
	}
};
</script>

<style lang="scss" scoped>
.grade {
	display: block;
	padding: 0 16rpx;
	font-size: 22rpx;
	/* height: 36rpx; */
	line-height: 36rpx;
	border-radius: 40rpx;
	background-color: rgba($color: #000000, $alpha: 0.1);
	color: #ffffff;
}

.diy-Base {
	position: absolute;
	width: 710rpx;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 0 20rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
}

.diy-Base .list {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.diy-Base .list .item {
	padding: 20rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.diy-Base .list.column-3 .item {
	// width: 33.333333333%;
	width: 20%;
}

.diy-Base .list.column-4 .item {
	width: 25%;
}

.diy-Base .list.column-5 .item {
	width: 20%;
}

.diy-Base .list .item-image {
	width: 60%;
}

.diy-Base .list .item-image img {
	width: 100%;
}

.diy-Base .list .item-text {
	width: 100%;
	padding: 8rpx 0;
	text-align: center;
}

.bg-box {
	overflow: hidden;
	height: 410rpx;
	position: relative;

	.news {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		z-index: 100;

		.chat {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.news_num {
		position: absolute;
		top: 24rpx;
		right: 44rpx;
		z-index: 100;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		line-height: 25rpx;
		color: #ffffff;
		background-color: #ff6633;
		padding: 5rpx;
		font-size: 20rpx;
	}
}

.bg-base {
	width: 160%;
	height: 600rpx;
	position: absolute;
	right: 0;
	left: -30%;
	top: -194rpx;
	bottom: 0;
	margin: auto;
	border-radius: 50% 50% 50% 50%;
}

.bg-base-1 {
	background-color: #ff5704;
}

.bg-base-2 {
	background-color: #19ad57;
}

.bg-base-3 {
	background-color: #ffcc00;
}

.bg-base-4 {
	background-color: #33a7ff;
}

.bg-base-5 {
	background-color: #e4e4e4;
}

.bg-base-6 {
	background-color: #c8ba97;
}

.bg-base-7 {
	background-color: #623ceb;
}

.item-image {
	width: 102rpx;
	height: 102rpx;
	border-radius: 50%;
	background-color: #fff;
	overflow: hidden;
	margin-right: 20rpx;

	image {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		background-color: #fff;
	}
}

.d-c-s {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.bind_phone {
	width: 100%;
	height: 80rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin: 20rpx 0;

	.bind_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		/* box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1); */
		border-radius: 16rpx;
		height: 100%;
		padding: 0 20rpx;
	}
}
</style>
